<template>
  <section>
      <div class="bii-box-section">
        <el-alert
            style="width: 600px; margin: 13px 0px 8px;"
            title="每日的对账单会在 次日凌晨 进行更新，每月的对账单会在 次月首日凌晨 进行更新。"
            type="error">
        </el-alert>

        <el-row :gutter="20" style="margin-top:20px;">
            <el-col :span="8">
                <div class="tab-nav">
                    <div @click="handleType('0')" class="item" :class="{'active':(listQuery.type=='0')}">日汇总</div>
                    <div @click="handleType('1')" class="item" :class="{'active':(listQuery.type=='1')}">月汇总</div>
                </div>
            </el-col>
            <el-col :span="16" style="text-align:right;">
                    <common-input @keyup.enter.native="handleFilter" style="width:150px;" placeholder="供应商" v-model="listQuery.agencyName" />
                <el-select @change="handleFilter" class="w100 ml10" size="mini" v-model="listQuery.year" placeholder="年份">
                    <el-option
                            v-for="item in yearList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select @change="handleFilter" v-if="listQuery.type=='0'" class="w100 ml10" size="mini" v-model="listQuery.month" placeholder="月份">
                    <el-option value="1">1</el-option>
                    <el-option value="2">2</el-option>
                    <el-option value="3">3</el-option>
                    <el-option value="4">4</el-option>
                    <el-option value="5">5</el-option>
                    <el-option value="6">6</el-option>
                    <el-option value="7">7</el-option>
                    <el-option value="8">8</el-option>
                    <el-option value="9">9</el-option>
                    <el-option value="10">10</el-option>
                    <el-option value="11">11</el-option>
                    <el-option value="12">12</el-option>
                </el-select>
                <el-button class="ml10" size="mini" @click="exportExcel">导出报表</el-button>
            </el-col>
            <el-col :span="24" style="margin-top:12px;">
                <el-table ref="dataTable" :data="list" style="width: 100%">
                    <el-table-column align="left" label="供应商" width="150">
                        <template slot-scope="scope">
                            <span>{{scope.row.agencyName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="日期" width="150">
                        <template slot-scope="scope">
                            <span>{{scope.row.date}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="收入（元）">
                        <template slot-scope="scope">
                            <span><span v-if="scope.row.amount>=0">+</span>{{scope.row.amount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="退款（元）">
                        <template slot-scope="scope">
                            <span><span v-if="scope.row.refundAmount>=0">+</span>{{scope.row.refundAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="营收（元）">
                        <template slot-scope="scope">
                            <span><span v-if="scope.row.finalAmount>=0">+</span>{{scope.row.finalAmount}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
                </div>
            </el-col>
        </el-row>
      </div>
  </section>
</template>

<script>
    import {
        order_profit_list,
        order_profit_list_export
    } from '../../api/order';
    export default {
        components: {
        },
        data() {
            return {
                yearList: [],
                listQuery: {
                    type: "0",
                    year: undefined,
                    month: undefined,
                    pageNum:1,
                    pageSize: 20,
                    agencyName: undefined,
                },
                list: [],
                total: 0,
            }
        },
        mounted() {
        },
        created() {
            let startYear = 2021;

            var myDate = new Date();
            var endYear = myDate.getFullYear();

            this.yearList = [];
            for(var i = startYear; i <= endYear; i++) {
                this.yearList.push(
                    {
                        "name": i + "年",
                        "id": i
                    }
                )
            };

            this.handleFilter();
        },
        methods: {
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            getList() {
                order_profit_list(this.listQuery).then((response)=>{
                    this.list = response.data.list;
                    this.total = response.data.total;

                }).catch((err)=>{
                    
                })
            },
            handleType(type) {
                this.listQuery.type = type;
                this.handleFilter();
            },
            createCellPos(n) {
                var ordA = 'A'.charCodeAt(0);

                var ordZ = 'Z'.charCodeAt(0);

                var len = ordZ - ordA + 1;

                var s = "";



                while( n >= 0 ) {

                    s = String.fromCharCode(n % len + ordA) + s;

                    n = Math.floor(n / len) - 1;

                }

                return s;

            },
            exportExcel() {
                order_profit_list_export(this.listQuery).then((res)=>{
                    if(res.data.items && res.data.items.length > 0) {
                        let items = res.data.items;

                        let export_config = res.data.exportConfig;
                        items.unshift(export_config.header)

                        var column = null;
                        eval("column = " + export_config.columnJs);
                        console.log(column)
                        let export_data = LAY_EXCEL.filterExportData(items, column);
                        let sheet_data = new Object();
                        eval("sheet_data." + res.data.sheet + "=export_data;");
                        let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

                        LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
                            s: {
                                fill: { fgColor: { rgb: "FFFF00" } },
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                },
                                font: {
                                    sz: 12,
                                    bold: true
                                }
                            }
                        });

                        LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
                            extend: {
                                '!merges': export_config.mergeCells,
                                '!cols': export_config.width,
                                '!rows': LAY_EXCEL.makeRowConfig({
                                    1: 40
                                })
                            }
                        });
                    } else {
                        this.$message.error("导出数据为空");
                    }
                }).catch((err)=>{
                    console.log(err)
                })
            },
        }
    };
</script>
<style lang="scss" scoped>
    .bii-box-section {
        // padding: 80px;
        // height: 100%;
        // background: #fff;
        // -webkit-box-sizing: border-box;
        // box-sizing: border-box;
        // overflow: auto;
    }
</style>
